<template>
	<picker :range="range" @change="changeValue" :range-key="props.label" :disabled="disabled">
		<view class="title picker">{{text}}</view>
	</picker>
</template>

<script>
	export default {
		props: {
			/* 格式:{lable:"",value:""} */
			range: {
				type: Array,
				value: []
			},
			props: {
				type: Object,
				default: function () {
					return {
						label: 'label',
						value: 'value'
					}
				}
			},
			value: {
				type: String,
				value: ""
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				text: ''
			};
		},
		methods: {
			changeValue: function(e) {
				let index = e.target.value
				this.text = this.range[index][this.props.label]
				this.$emit('input', this.range[index][this.props.value]);
			}
		},
		mounted(){
			if(this.value){
				for(let i in this.range){
					if(this.range[i][this.props.value] == this.value){
						this.text = this.range[i][this.props.label]
						this.$emit('input', this.range[i][this.props.value]);
					}
				}
			}else{
				if(this.range.length>0){
					this.text = this.range[0][this.props.label]
					this.$emit('input', this.range[0][this.props.value]);
				}
			}
		},
		watch: {
            range(newR){
				console.log('newR',newR)
			}
		}
	}
</script>

<style>

</style>
